<div class="container-fluid">
<div mindtagger-include="'mindtagger/tasks/'+ MindtaggerTask.name +'/'+ MindtaggerTask.config.template" ng-if="MindtaggerTask.config.template">
    <strong>
        {{MindtaggerTask.config.template || 'template.html'}} missing in task {{MindtaggerTask.name}}
    </strong>
</div>

<section class="row">
<div ng-if="!MindtaggerTask.items" class="alert alert-block alert-info text-center col-sm-offset-4 col-sm-4" style="margin-top: 20%;">
  <h4>Loading items...</h4>
  <div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar"
      aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      <span></span>
    </div>
  </div>
</div>
</section>
</div>

<!-- Adding new tags -->
<div class="modal" id="add-tag-modal" tabindex="-1" role="dialog" aria-labelledby="addTagModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="addTagModalLabel">Add/Create Tag</h4>
      </div>
      <div class="modal-body">
        <!-- support entering new simple tags -->
        <form class="form-horizontal" role="form" ng-submit="MindtaggerTask.addTagToCursor(tagNameToAdd, true)"
            onsubmit="$('#add-tag-modal').modal('hide');">
          <div class="form-group">
            <label for="add-tag-name" class="col-sm-2 control-label">Tag Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="add-tag-name"
                ng-model="tagNameToAdd"
                typeahead="tagName for tagName in keys(MindtaggerTask.schema.tags) | filter:$viewValue | limitTo:8">
            </div>
          </div>
        </form>
        <!-- TODO support entering new freetext and categorical tags -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal"
          ng-click="MindtaggerTask.addTagToCursor(tagNameToAdd, true)">Add Tag</button>
      </div>
    </div>
  </div>
</div>
<script>
  // autofocus the first visible input field in the modal
  $("#add-tag-modal").on("shown.bs.modal", function(e) { $(this).find("input:visible:first").focus(); });
</script>


<!-- Managing tags: shortcut key, visibility, etc. -->
<div class="modal" id="manage-tags-modal" tabindex="-1" role="dialog" aria-labelledby="manageTagsModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="manageTagsModalLabel">Manage Tags</h4>
      </div>
      <div class="modal-body">
        <table class="table table-stripped table-hover">
          <thead>
            <tr>
              <th>Tag</th>
              <th>Shortcut Key</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="(tagName, tagOpt) in MindtaggerTask.tagOptions">
              <th><i class="fa fa-tag"></i> {{tagName}}</th>
              <td class="col-xs-2">
                <input type="text" class="form-control input-sm" ng-model="tagOpt.shortcutKey">
              </td>
              <td>
                <label btn-checkbox btn-checkbox-true="true" btn-checkbox-false="null"
                  class="btn" ng-class="(tagOpt.hidden ? 'btn-danger' : 'btn-default') +
                    (MindtaggerTask.schemaTagsFixed[tagName].hidden == null ? '' : ' disabled')"
                  ng-model="tagOpt.hidden">
                  <span ng-if="!tagOpt.hidden"><i class="fa fa-eye"></i> Shown</span>
                  <span ng-if=" tagOpt.hidden"><i class="fa fa-eye-slash"></i> Hidden</span>
                </label>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<script>
  // autofocus the first visible input field in the modal
  $("#add-tag-modal").on("shown.bs.modal", function(e) { $(this).find("input:visible:first").focus(); });
</script>


<!-- Error modal when loading the task fails -->
<script type="text/ng-template" id="mindtagger/load-error.html">
  <div class="modal-header text-danger">
    <h3 class="modal-title">Task Not Found!</h3>
  </div>
  <div class="modal-body text-danger">
    There is no such task named "<strong>{{taskName}}</strong>" known to Mindtagger.
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger" ng-click="$close()">Open Another Task</button>
  </div>
</script>

<!-- Error modal when commiting tag fails -->
<script type="text/ng-template" id="mindtagger/commit-error.html">
  <div class="modal-header text-danger">
    <h3 class="modal-title">Error Saving Tag</h3>
  </div>
  <div class="modal-body text-danger">
    Error occurred while saving the tag.<br>
    Make sure Mindtagger is running and reload the page.
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger" ng-click="$close()">Reload</button>
  </div>
</script>

<!-- Export Tags stuff -->
<div class="modal fade" id="export-modal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="exportModalLabel">Export Tags</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form"
            ng-submit="MindtaggerTask.export(exportFormat, exportTableName)"
            onsubmit="$('#export-modal').modal('hide');">
          <div class="form-group">
            <label for="export-attrs" class="col-sm-2 control-label">Attributes to export</label>
            <div class="col-sm-10">
              <ul class="list-inline">
                <li ng-repeat="(attrName, attrSchema) in MindtaggerTask.schema.items">
                  <span class="checkbox">
                    <label>
                      <input type="checkbox" ng-model="attrSchema.shouldExport">
                      {{attrName}}
                    </label>
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="form-group">
            <label for="export-tags" class="col-sm-2 control-label">Tags to export</label>
            <div class="col-sm-10">
              <ul class="list-inline">
                <li ng-repeat="(tagName, tagOpt) in MindtaggerTask.tagOptions">
                  <span class="checkbox">
                    <label>
                      <input type="checkbox" ng-model="tagOpt.shouldExport">
                      {{tagName}}
                    </label>
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="form-group">
            <label for="export-format" class="col-sm-2 control-label">Format</label>
            <div class="col-sm-10" ng-init="exportFormat = 'update.sql'">
              <select id="export-format" class="form-control" ng-model="exportFormat">
                <option>update.sql</option>
                <option>insert.sql</option>
                <option>json</option>
                <option>tsv</option>
                <option>csv</option>
              </select>
            </div>
          </div>
          <div class="form-group" ng-if="exportFormat == 'update.sql' || exportFormat == 'insert.sql'">
            <label for="export-table-name" class="col-sm-2 control-label">Table name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="export-table-name"
                ng-model="$parent.exportTableName"
                placeholder="Specify table name to use for sql formats">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="MindtaggerTask.export(exportFormat, exportTableName)">Download</button>
      </div>
    </div>
  </div>
</div>
